#app {
  .main-container {
    min-height: 100%;
    transition: margin-left 0.28s;
    margin-left: $sideBarWidth;
    position: relative;
  }
  // 系统管理
  .app-wrapper {
    .navbar {
      height: 50px;
      overflow: hidden;
      background: #3285ff !important;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      .navbar-logo {
        margin-top: 2px;
        width: 50px;
        height: 50px;
      }
      img.navbar-logo {
        margin: 1px 10px 0 20px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: #fff;
      }
      .navbar-title {
        float: left;
        color: #fff;
        font-size: 22px;
        text-shadow: 0.5px 0.866px 0px rgba(30, 61, 105, 0.42);
      }
      .current-user {
        color: #fff;
      }
      .user-avatar {
        border: 1px solid #3285fe;
      }
      .user-name {
        color: #fff;
      }
    }
    .sidebar-container {
      width: $sideBarWidth !important;
      background-color: $menuBg;
      height: calc(100% - 50px);
      font-size: 0px;
      top: 50px;
      bottom: 0;
      left: 0;
      z-index: 1001;
      overflow: hidden;
      border-right: 1px solid #e8e8e8;
      // background:url("./images/siderBg.png");

      // reset element-ui css
      .horizontal-collapse-transition {
        transition: 0s width ease-in-out, 0s padding-left ease-in-out,
          0s padding-right ease-in-out;
      }

      .scrollbar-wrapper {
        overflow-x: hidden !important;
      }

      .el-scrollbar__bar.is-vertical {
        right: 0px;
      }

      .el-scrollbar {
        height: calc(100vh - 50px);
      }

      &.has-logo {
        .el-scrollbar {
          height: calc(100% - 50px);
        }
      }

      .is-horizontal {
        display: none;
      }

      a {
        display: inline-block;
        width: 100%;
        overflow: hidden;
      }

      .svg-icon {
        margin-right: 10px;
      }

      .el-menu {
        border: none;
        padding-top: 4px;
        height: 100%;
        width: 100% !important;
      }

      // menu hover
      .submenu-title-noDropdown,
      .el-submenu__title {
        color: #666 !important;
        height: 40px !important;
        line-height: 40px !important;
        &:hover {
          background-color: $menuHover !important;
          color: $subMenuActiveText !important;
          border-radius: 20px;
        }
      }
      .is-active {
        & > .el-submenu__title {
          background: #fff !important;
          border-radius: 20px;
          height: 40px !important;
          line-height: 40px !important;
          color: $subMenuActiveText !important;
        }
      }

      & .nest-menu .el-submenu > .el-submenu__title,
      & .el-submenu .el-menu-item {
        min-width: $sideBarWidth !important;
        background-color: $subMenuBg !important;
        color: #666 !important;
        height: 40px !important;
        line-height: 40px !important;

        &:hover,
        &.is-active {
          // padding-right:40px !important;
          // border-bottom-right-radius: 30px;
          // border-top-right-radius: 30px;
          background-color: $subMenuHover !important;
          color: #fff !important;
        }
      }

      .el-menu-item.submenu-title-noDropdown {
        font-size: 0;
        svg,
        span {
          font-size: 14px;
        }
        // display: flex;
        // align-items: center;
      }
    }
  }
  // 其他页面
  .page-wrapper {
    position: relative;
    height: 100%;
    // background-image: url("../assets/images/pageBg.png");
    background-repeat: no-repeat;
    background-size: cover;
    .navbar {
      height: 0;
      background: transparent !important;
      .navbar-logo {
        margin-top: 5px;
        width: 100px;
        height: 100px;
      }
      img.navbar-logo {
        border-radius: 50%;
        background-color: #fff;
      }
      .navbar-title {
        height: 100px;
        line-height: 100px;
        font-size: 32px;
        color: rgb(53, 144, 250);
        text-shadow: 0.5px 0.866px 0px rgba(30, 61, 105, 0.42);
      }
      .current-user {
        color: #333;
      }
      .user-name {
        color: #333;
      }
    }
    .sidebar-container {
      top: 130px;
      left: 2em;
      width: 90px;
      max-height: calc(100% - 150px);
      overflow-y: auto;
      // height: 542px;
      border-radius: 4px;
      background-color: rgb(255, 255, 255);
      box-shadow: 2px 0px 9.5px 0.5px rgba(165, 165, 165, 0.3);
      z-index: 999;
      .el-scrollbar__view > .el-menu {
        width: 100%;
        border: none;
        & > div {
          & > a > .el-menu-item,
          & > .el-submenu {
            padding: 0 !important;
            text-align: center;
            height: 100px;
            line-height: normal;
            .svg-icon {
              margin-top: 24px;
              width: 30px;
              height: 30px;
            }
            .side-title {
              padding-top: 5px;
              margin-bottom: 2em;
              display: block;
              font-family: "SourceHanSansCN";
              font-size: 14px;
            }
            &.is-active {
              color: rgb(53, 144, 250);
            }
            .el-submenu__title {
              height: 100%;
              line-height: 1.6;
            }
          }
          & + div {
            li::before {
              position: absolute;
              display: block;
              left: calc(50% - 18px);
              content: "";
              width: 36px;
              height: 2px;
              background-color: rgb(202, 198, 198);
            }
          }
        }
      }
      .el-submenu.is-active .el-submenu__title {
        color: #3285fe !important;
        background-color: rgba(50, 133, 254, 0.1) !important;
      }
      .el-submenu__icon-arrow {
        display: none;
      }
      // menu hover
      .submenu-title-noDropdown,
      .el-submenu__title {
        &:hover {
          background-color: rgba(50, 133, 254, 0.1) !important;
          color: #3285fe !important;
        }
      }
    }
  }

  .el-menu--collapse .el-menu .el-submenu {
    min-width: $sideBarWidth !important;
  }

  // mobile responsive
  .mobile {
    .main-container {
      margin-left: 0px;
    }

    .sidebar-container {
      transition: transform 0.28s;
      width: $sideBarWidth !important;
    }
  }

  .withoutAnimation {
    .main-container,
    .sidebar-container {
      transition: none;
    }
  }
}

// when menu collapsed
.el-menu--vertical {
  width: 11em;
  overflow: hidden;
  box-shadow: 2px 0px 9.5px 0.5px rgba(165, 165, 165, 0.3);
  & > .el-menu {
    .svg-icon {
      margin-right: 10px;
    }
  }

  .nest-menu .el-submenu > .el-submenu__title,
  .el-menu-item {
    color: #666 !important;
    height: 40px !important;
    line-height: 40px !important;
    &:hover,
    .is-active {
      // you can use $subMenuHover
      // border-bottom-right-radius: 30px;
      // border-top-right-radius: 30px;
      color: #fff !important;
      background-color: $subMenuHover !important;
    }
  }

  // the scroll bar appears when the subMenu is too long
  > .el-menu--popup {
    max-height: 100vh;
    overflow-y: auto;
    background-color: #fff !important;

    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #99a9bf;
      border-radius: 20px;
    }
  }
}
